<template>
  <div style="height: 100%" ref="newsContainer">
    <el-button 
      type="primary"
      size="mini"
      @click="creatNews()"
      style="font-size: 14px; margin-bottom: 10px;">新建</el-button>
    <el-table :data="tableData" stripe v-bind:max-height="tabelMaxHeight">
      <el-table-column prop="id" label="编号" width="100"></el-table-column>
      <el-table-column prop="title" label="新闻名称" width="500"></el-table-column>
      <el-table-column label="标题图片">
        <template slot-scope="scope">
          <img v-bind:src="scope.row.titlepic" style="height: 60px;">
        </template>
      </el-table-column>
      <el-table-column label="浏览数">
        <template slot-scope="scope">
          <span>{{ scope.row.views }}次</span>
        </template>
      </el-table-column>
      <el-table-column prop="edittime" label="更新时间" :formatter="formatDate"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        v-bind:total="newsTotalCount">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import api from '@/axios.js'

export default {
  data() {
    return {
      // 新闻table高度
      tabelMaxHeight: 0,
      // 新闻总数
      newsTotalCount: 0,
      // 分页size
      pageSize: 10,
      // 新闻数据
      tableData: []
    }
  },
  mounted: function() {
    this.getNewsList(1);
  },
  methods: {
    // 编辑新闻
    handleEdit(index, row) {
      window.location.href = 'http://localhost:8004/addNews.html?newsId='+row.id+'&token='+this.$store.state.token;
    },
    // 删除新闻
    handleDelete(index, row) {
      this.deleteNews(row.id, index);
    },
    // 分页size改变
    handleSizeChange(val) {
    },
    // 分页页数改变
    handleCurrentChange(val) {
      this.getNewsList(val);
    },
    // 新建新闻
    creatNews() {
      window.location.href = 'http://localhost:8004/addNews.html?token='+this.$store.state.token;
    },
    // 获取新闻列表
    getNewsList(pageNum) {
      api.getAdminNewsList({
        pageNum: pageNum,
        pageSize: this.pageSize
      }).then(({ data }) => {
        this.tableData = data.list;
        this.newsTotalCount = data.total;
        // 动态设置新闻table的高度
        this.tabelMaxHeight = this.$refs.newsContainer.offsetHeight - 100;
      }).catch(err => {
        this.$message.error(`获取数据失败`);
      });
    },
    // 删除新闻
    deleteNews(id,index){
      this.$confirm('是否删除该新闻?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
      }).then(() => {
        api.deleteNews({newsId:id}).then((data)=>{
          console.log(data.status)
            if(data.status == 200){
              this.tableData.splice(index,1);
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            }
        });
      }).catch(() => {
      });
    },
    // 编辑新闻
    editNews(id){
      this.$router.push({name: 'editNews',params: {newsId: id}});
    },
    formatDate(row){
      var date = new Date(parseInt(row.edittime));
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      month = month<10?"0"+month:month;
      var day = date.getDate();
      day = day<10?"0"+day:day;
      var hours = date.getHours();
      hours = hours<10?"0"+hours:hours;
      var minute = date.getMinutes();
      minute = minute<10?"0"+minute:minute;
      return year+"-"+month+"-"+day+" "+hours+":"+minute;
    }
  }
}
</script>

<style scoped>
.el-table {
  width: 100%;
}
.pagination {
  text-align: center;
  margin: 20px 0;
}
</style>